<template>
	<view class="content">
		<view class="OurBg">
			<view class="Img">
				<button plain class="img" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="image" src="../../static/img.png"></image>
				</button>
				<text class="iconfont icon-tianjia add"></text>
			</view>
		</view>
		<view class="NicknameInfo">
			<view class="Nickname">
				你的昵称
			</view>
			<view class="company">
				湖南浩通科技有限公司
			</view>
		</view>
		<view class="OurNavList">
			<view class="OurNavItem" @click="Url(item)" v-for="(item,index) in NavList" :key="index">
				<view class="left">
					<text class="iconfont ico" :class="item.icon"></text>
					<text class="text"> {{item.text}}</text>
				</view>
				<view class="iconfont icon-zuoyou you">
					
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				NavList:[
					{
						icon:'icon-jibenxinxi',
						text:'基本信息',
						url:'/pages/UserInfo/UserInfo',
					},
					{
						icon:'icon-hehuoren_jianyifankui',
						text:'建议反馈',
						url:'/pages/FeedBack/FeedBack',
					},
					{
						icon:'icon-wenjuantiaocha',
						text:'问卷调查',
						url:'/pages/Investigation/Investigation',
					},
					{
						icon:'icon-xuexijilu1',
						text:'视频学习记录',
						url:'/pages/VideoRecord/VideoRecord',
					},
					{
						icon:'icon-chakanjilu',
						text:'资讯查看记录',
						url:'/pages/PolicyRecord/PolicyRecord',
					}
				],
			}
		},
		methods: {
			Url(e){
				uni.navigateTo({
					url:e.url
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.OurBg{
		background: url(../../static/bg.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 350rpx;
	.Img {
			padding-top: 80rpx;
	
			.img {
				padding-left: 0;
				padding-right: 0;
				margin-left: 40px;
				//
				border: 20rpx solid #fff;
				border-radius: 50%;
				width: 230rpx;
				height: 230rpx;
				box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.09);
			}
	
			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
	
			.add {
				position: absolute;
				font-size: 30rpx;
				color: #fff;
				background-color: rgba(212, 48, 48, 1);
				border-radius: 50%;
				padding: 10rpx;
				font-weight: bold;
				bottom: 60rpx;
				margin-left: 250rpx;
				z-index: 99;
			}
		}
	}
	.NicknameInfo{
		margin: 30rpx 60rpx;
		.Nickname{
			font-size: 52rpx;
			font-weight: 400;
			letter-spacing: -0.5px;
			line-height: 32px;
			color: rgba(83, 88, 110, 1);
			text-align: left;
			vertical-align: top;
		}
		.company{
			font-size: 24rpx;
			color: rgba(134, 134, 134, 1);
			padding-top: 10rpx;
		}
	}
	.OurNavList{
		margin: 40rpx 60rpx;
		.OurNavItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			padding:25rpx 20rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 2px 2px 10px  rgba(51, 51, 51, 0.1);
		.ico{
			color:rgba(212, 48, 48, 1) ;
			font-size: 34rpx;
			padding-right: 40rpx;
		}
		.you{
			font-size: 26rpx;
			color:rgba(153, 153, 153, 1);
		}
		.text{
			color: rgba(102, 102, 102, 1);
			font-size: 28rpx;
		}
		}
	}

</style>
